<template>
    <div>
        关于我
      <hr />

      <!-- vue-router中的地址会自动放到a标签中 -->
      <!--<ul class="nav">

         有默认子路由的时候，这里只要使用/about，不需要使用/about/study
         <router-link to="/about" tag="li" exact>
           <a>study</a>
         </router-link>

        <router-link to="/about/work" tag="li">
          <a>work</a>
        </router-link>

        <router-link to="/about/hobby" tag="li">
          <a>hobby</a>
        </router-link>
      </ul>-->

      <ul class="nav">
        <!-- 路由嵌套多层的时候，可以使用命名路由,命名路由要使用对象的形式 -->
        <router-link :to="{name:'about'}" tag="li" exact>
          <a>study</a>
        </router-link>

        <router-link :to="{name:'work'}" tag="li">
          <a>work</a>
        </router-link>

        <router-link :to="{name:'hobby'}" tag="li">
          <a>hobby</a>
        </router-link>
      </ul>

      <hr/>
      <router-view></router-view>

      <div>测试数据：{{  test  }}</div>
    </div>
</template>

<script>
    export default{

      data(){
          return{
            test:'改变前'
          }
      },
      created(){
        console.log('组件生成了');
      },

      beforeRouteEnter(to,from,next){

        //在组件生成之前，该钩子函数就会执行,所以this为undefined
        // console.log(this);

        //当我们需要去改变test值得时候，可以在next方法中通过回调函数接收一个参数vm，vm指的就是当前组件实例
        next(function (vm){
            vm.test="改变了"
        });
      },

      //二级导航切换的时候执行,在当前路由改变，但是该组件被复用时调用
      beforeRouteUpdate(to,from,next){
        console.log('beforeRouteUpdate');
        next();
      },

      beforeRouteLeave(to,from,next){
        next();
      }
    }
</script>

<style>

</style>
